<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存酒管理系统-by半城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary-color: #8B4513;
            --secondary-color: #D2691E;
            --accent-color: #F4A460;
            --light-color: #FFF8DC;
            --dark-color: #5D4037;
            --success-color: #4CAF50;
            --warning-color: #FF9800;
            --error-color: #F44336;
            --text-color: #333;
            --light-text: #FFF;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--light-text);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }
        
        h1 {
            font-size: 24px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .subtitle {
            font-size: 14px;
            opacity: 0.9;
            position: relative;
        }
        
        .card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: var(--primary-color);
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        input:focus, select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
            outline: none;
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            font-weight: 600;
        }
        
        button:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .btn-secondary {
            background-color: var(--accent-color);
            color: var(--dark-color);
        }
        
        .btn-success {
            background-color: var(--success-color);
        }
        
        .btn-warning {
            background-color: var(--warning-color);
        }
        
        .btn-danger {
            background-color: var(--error-color);
        }
        
        .tabs {
            display: flex;
            margin-bottom: 20px;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }
        
        .tab.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        .tab::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: var(--accent-color);
            transition: all 0.3s;
            transform: translateX(-50%);
        }
        
        .tab.active::after {
            width: 80%;
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .tab-content.active {
            display: block;
        }
        
        .wine-list {
            list-style: none;
        }
        
        .wine-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
            transition: all 0.3s;
            border-radius: 10px;
            margin-bottom: 10px;
            background: #f9f9f9;
        }
        
        .wine-item:hover {
            background-color: #f0f0f0;
        }
        
        .wine-info {
            flex: 1;
        }
        
        .wine-type {
            font-weight: bold;
            font-size: 16px;
            color: var(--dark-color);
        }
        
        .wine-details {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        
        .wine-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 14px;
            width: auto;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .status-stored {
            background-color: var(--success-color);
            color: white;
        }
        
        .status-taken {
            background-color: var(--error-color);
            color: white;
        }
        
        .status-expired {
            background-color: var(--warning-color);
            color: white;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        
        .empty-state i {
            font-size: 50px;
            margin-bottom: 15px;
            opacity: 0.5;
        }
        
        .search-box {
            position: relative;
            margin-bottom: 20px;
        }
        
        .search-box input {
            padding-left: 40px;
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .stat-item {
            flex: 1;
            padding: 15px;
            background: white;
            border-radius: 15px;
            margin: 0 5px;
            box-shadow: var(--shadow);
            transition: transform 0.3s;
        }
        
        .stat-item:hover {
            transform: translateY(-5px);
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .stat-label {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        
        .customer-info {
            background: var(--light-color);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .customer-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }
        
        .customer-details {
            flex: 1;
        }
        
        .customer-name {
            font-weight: bold;
            font-size: 18px;
        }
        
        .customer-phone {
            color: #666;
            font-size: 14px;
        }
        
        .customer-stats {
            display: flex;
            gap: 15px;
        }
        
        .customer-stat {
            text-align: center;
        }
        
        .customer-stat-value {
            font-weight: bold;
            font-size: 18px;
            color: var(--primary-color);
        }
        
        .customer-stat-label {
            font-size: 12px;
            color: #666;
        }
        
        .expiry-warning {
            color: var(--warning-color);
            font-weight: bold;
        }
        
        .expiry-danger {
            color: var(--error-color);
            font-weight: bold;
        }
        
        .admin-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .admin-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .admin-stat {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: var(--shadow);
            text-align: center;
        }
        
        .admin-stat-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .admin-stat-label {
            font-size: 14px;
            color: #666;
        }
        
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .admin-table th, .admin-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        .admin-table th {
            background-color: var(--light-color);
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .admin-table tr:hover {
            background-color: #f9f9f9;
        }
        
        .filter-controls {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .filter-controls select, .filter-controls input {
            flex: 1;
        }
        
        .admin-actions {
            display: flex;
            gap: 10px;
        }
        
        .admin-btn {
            padding: 8px 12px;
            font-size: 14px;
            width: auto;
        }
        
        .admin-section {
            margin-bottom: 30px;
        }
        
        .admin-login {
            text-align: center;
            padding: 40px 20px;
        }
        
        .admin-login-form {
            max-width: 400px;
            margin: 0 auto;
        }
        
        .login-error {
            color: var(--error-color);
            margin-top: 10px;
            font-size: 14px;
            display: none;
        }
        
        .admin-logout {
            text-align: right;
            margin-bottom: 15px;
        }
        
        .logout-btn {
            width: auto;
            padding: 8px 15px;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .admin-panel {
                grid-template-columns: 1fr;
            }
            
            .admin-stats {
                grid-template-columns: 1fr;
            }
            
            .filter-controls {
                flex-direction: column;
            }
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            
            .wine-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .wine-actions {
                margin-top: 10px;
                width: 100%;
            }
            
            .action-btn {
                flex: 1;
            }
            
            .stats {
                flex-direction: column;
            }
            
            .stat-item {
                margin: 5px 0;
            }
            
            .customer-info {
                flex-direction: column;
                text-align: center;
            }
            
            .customer-avatar {
                margin-right: 0;
                margin-bottom: 10px;
            }
            
            .admin-table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>存酒管理系统</h1>
            <div class="subtitle">by半城</div>
        </header>
        
        <div class="stats">
            <div class="stat-item">
                <div class="stat-value" id="total-wines">0</div>
                <div class="stat-label">总存酒数</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="stored-wines">0</div>
                <div class="stat-label">在库数量</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="expired-wines">0</div>
                <div class="stat-label">即将到期</div>
            </div>
        </div>
        
        <div class="tabs">
            <div class="tab active" data-tab="store">存酒</div>
            <div class="tab" data-tab="take">取酒</div>
            <div class="tab" data-tab="history">历史记录</div>
            <div class="tab" data-tab="admin">管理后台</div>
        </div>
        
        <!-- 存酒界面 -->
        <div class="tab-content active" id="store-tab">
            <div class="card">
                <h2 class="section-title">📦 存酒登记</h2>
                <form id="store-form">
                    <div class="form-group">
                        <label for="customer-phone">手机号码</label>
                        <input type="tel" id="customer-phone" placeholder="请输入11位手机号码" pattern="[0-9]{11}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="customer-name">客户姓名</label>
                        <input type="text" id="customer-name" placeholder="请输入客户姓名" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="wine-type">酒品类型</label>
                        <select id="wine-type" required>
                            <option value="">请选择类型</option>
                            <option value="雪花4.8">雪花4.8</option>
                            <option value="雪花5.8">雪花5.8</option>
                            <option value="喜力">喜力</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="wine-quantity">数量</label>
                        <input type="number" id="wine-quantity" placeholder="例如：2" min="1" value="1" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="storage-date">存酒日期</label>
                        <input type="date" id="storage-date" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="expiry-date">到期时间</label>
                        <input type="date" id="expiry-date" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="notes">备注信息</label>
                        <input type="text" id="notes" placeholder="可填写特殊说明">
                    </div>
                    
                    <button type="submit" class="btn-success">确认存酒</button>
                </form>
            </div>
        </div>
        
        <!-- 取酒界面 -->
        <div class="tab-content" id="take-tab">
            <div class="card">
                <h2 class="section-title">🍷 取酒操作</h2>
                <div class="search-box">
                    <span class="search-icon">🔍</span>
                    <input type="tel" id="search-phone" placeholder="输入手机号码查询存酒记录..." pattern="[0-9]{11}">
                </div>
                
                <div id="customer-details" style="display: none;">
                    <!-- 动态生成的客户信息 -->
                </div>
                
                <div id="stored-wines-list">
                    <!-- 动态生成的存酒列表 -->
                </div>
            </div>
        </div>
        
        <!-- 历史记录界面 -->
        <div class="tab-content" id="history-tab">
            <div class="card">
                <h2 class="section-title">📝 存取记录</h2>
                <div class="search-box">
                    <span class="search-icon">🔍</span>
                    <input type="tel" id="history-phone" placeholder="输入手机号码查询历史记录..." pattern="[0-9]{11}">
                </div>
                
                <div id="history-list">
                    <!-- 动态生成的历史记录 -->
                </div>
            </div>
        </div>
        
        <!-- 管理后台界面 -->
        <div class="tab-content" id="admin-tab">
            <!-- 管理员登录界面 -->
            <div id="admin-login" class="admin-login">
                <div class="card">
                    <h2 class="section-title">🔐 管理员登录</h2>
                    <p>请输入管理员密码以访问管理后台</p>
                    <div class="admin-login-form">
                        <div class="form-group">
                            <input type="password" id="admin-password" placeholder="请输入管理员密码">
                        </div>
                        <button id="admin-login-btn" class="btn-success">登录</button>
                        <div id="login-error" class="login-error">密码错误，请重试</div>
                    </div>
                </div>
            </div>
            
            <!-- 管理后台内容（登录后显示） -->
            <div id="admin-content" style="display: none;">
                <div class="admin-logout">
                    <button id="admin-logout-btn" class="logout-btn btn-secondary">退出登录</button>
                </div>
                
                <div class="admin-panel">
                    <div class="card">
                        <h2 class="section-title">📊 数据统计</h2>
                        <div class="admin-stats">
                            <div class="admin-stat">
                                <div class="admin-stat-value" id="admin-total-wines">0</div>
                                <div class="admin-stat-label">总存酒数</div>
                            </div>
                            <div class="admin-stat">
                                <div class="admin-stat-value" id="admin-stored-wines">0</div>
                                <div class="admin-stat-label">在库数量</div>
                            </div>
                            <div class="admin-stat">
                                <div class="admin-stat-value" id="admin-taken-wines">0</div>
                                <div class="admin-stat-label">已取数量</div>
                            </div>
                            <div class="admin-stat">
                                <div class="admin-stat-value" id="admin-expired-wines">0</div>
                                <div class="admin-stat-label">即将到期</div>
                            </div>
                        </div>
                        
                        <div class="admin-section">
                            <h3 class="section-title">📈 客户统计</h3>
                            <div class="filter-controls">
                                <select id="customer-sort">
                                    <option value="name">按姓名排序</option>
                                    <option value="count">按存酒数量排序</option>
                                </select>
                            </div>
                            <div id="customer-stats-list">
                                <!-- 动态生成的客户统计 -->
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <h2 class="section-title">🔍 记录管理</h2>
                        <div class="filter-controls">
                            <select id="status-filter">
                                <option value="all">全部状态</option>
                                <option value="stored">在库</option>
                                <option value="taken">已取</option>
                            </select>
                            <input type="text" id="admin-search" placeholder="搜索手机号或姓名...">
                        </div>
                        
                        <div id="admin-records-list">
                            <!-- 动态生成的管理记录 -->
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h2 class="section-title">⏰ 到期提醒</h2>
                    <div class="filter-controls">
                        <select id="expiry-filter">
                            <option value="all">全部</option>
                            <option value="week">7天内到期</option>
                            <option value="expired">已到期</option>
                        </select>
                    </div>
                    
                    <div id="expiry-list">
                        <!-- 动态生成的到期提醒 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化数据
        let wines = JSON.parse(localStorage.getItem('wines')) || [];
        let nextId = parseInt(localStorage.getItem('nextId')) || 1;
        
        // 管理员密码
        const ADMIN_PASSWORD = "yj123";
        
        // DOM元素
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        const storeForm = document.getElementById('store-form');
        const storedWinesList = document.getElementById('stored-wines-list');
        const historyList = document.getElementById('history-list');
        const searchPhoneInput = document.getElementById('search-phone');
        const historyPhoneInput = document.getElementById('history-phone');
        const customerDetails = document.getElementById('customer-details');
        
        // 管理后台元素
        const adminLogin = document.getElementById('admin-login');
        const adminContent = document.getElementById('admin-content');
        const adminPasswordInput = document.getElementById('admin-password');
        const adminLoginBtn = document.getElementById('admin-login-btn');
        const adminLogoutBtn = document.getElementById('admin-logout-btn');
        const loginError = document.getElementById('login-error');
        
        // 统计元素
        const totalWinesEl = document.getElementById('total-wines');
        const storedWinesEl = document.getElementById('stored-wines');
        const expiredWinesEl = document.getElementById('expired-wines');
        
        // 管理后台元素
        const adminTotalWinesEl = document.getElementById('admin-total-wines');
        const adminStoredWinesEl = document.getElementById('admin-stored-wines');
        const adminTakenWinesEl = document.getElementById('admin-taken-wines');
        const adminExpiredWinesEl = document.getElementById('admin-expired-wines');
        const customerStatsList = document.getElementById('customer-stats-list');
        const adminRecordsList = document.getElementById('admin-records-list');
        const expiryList = document.getElementById('expiry-list');
        const statusFilter = document.getElementById('status-filter');
        const adminSearch = document.getElementById('admin-search');
        const expiryFilter = document.getElementById('expiry-filter');
        const customerSort = document.getElementById('customer-sort');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期为今天
            const today = new Date();
            document.getElementById('storage-date').valueAsDate = today;
            
            // 设置默认到期时间为30天后
            const expiryDate = new Date();
            expiryDate.setDate(today.getDate() + 30);
            document.getElementById('expiry-date').valueAsDate = expiryDate;
            
            // 更新统计
            updateStats();
            
            // 检查是否已经登录
            checkAdminLogin();
            
            // 标签页切换
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    
                    // 更新活动标签
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 显示对应内容
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        if (content.id === `${tabId}-tab`) {
                            content.classList.add('active');
                        }
                    });
                    
                    // 如果是取酒标签，清空搜索
                    if (tabId === 'take') {
                        searchPhoneInput.value = '';
                        customerDetails.style.display = 'none';
                        storedWinesList.innerHTML = '';
                    }
                    
                    // 如果是历史记录标签，清空搜索
                    if (tabId === 'history') {
                        historyPhoneInput.value = '';
                        historyList.innerHTML = '';
                    }
                    
                    // 如果是管理后台标签，检查登录状态
                    if (tabId === 'admin') {
                        checkAdminLogin();
                    }
                });
            });
            
            // 存酒表单提交
            storeForm.addEventListener('submit', function(e) {
                e.preventDefault();
                storeWine();
            });
            
            // 搜索功能 - 取酒
            searchPhoneInput.addEventListener('input', function() {
                if (this.value.length === 11) {
                    renderCustomerDetails(this.value);
                    renderStoredWines(this.value);
                } else {
                    customerDetails.style.display = 'none';
                    storedWinesList.innerHTML = '';
                }
            });
            
            // 搜索功能 - 历史记录
            historyPhoneInput.addEventListener('input', function() {
                if (this.value.length === 11) {
                    renderHistory(this.value);
                } else {
                    historyList.innerHTML = '';
                }
            });
            
            // 管理员登录
            adminLoginBtn.addEventListener('click', function() {
                const password = adminPasswordInput.value;
                if (password === ADMIN_PASSWORD) {
                    // 登录成功
                    localStorage.setItem('adminLoggedIn', 'true');
                    adminLogin.style.display = 'none';
                    adminContent.style.display = 'block';
                    loginError.style.display = 'none';
                    
                    // 更新管理后台数据
                    updateAdminStats();
                    renderCustomerStats();
                    renderAdminRecords();
                    renderExpiryList();
                } else {
                    // 登录失败
                    loginError.style.display = 'block';
                    adminPasswordInput.value = '';
                }
            });
            
            // 管理员退出
            adminLogoutBtn.addEventListener('click', function() {
                localStorage.removeItem('adminLoggedIn');
                adminLogin.style.display = 'block';
                adminContent.style.display = 'none';
                adminPasswordInput.value = '';
            });
            
            // 管理后台筛选功能
            statusFilter.addEventListener('change', renderAdminRecords);
            adminSearch.addEventListener('input', renderAdminRecords);
            expiryFilter.addEventListener('change', renderExpiryList);
            customerSort.addEventListener('change', renderCustomerStats);
        });
        
        // 检查管理员登录状态
        function checkAdminLogin() {
            const isLoggedIn = localStorage.getItem('adminLoggedIn') === 'true';
            if (isLoggedIn) {
                adminLogin.style.display = 'none';
                adminContent.style.display = 'block';
                
                // 更新管理后台数据
                updateAdminStats();
                renderCustomerStats();
                renderAdminRecords();
                renderExpiryList();
            } else {
                adminLogin.style.display = 'block';
                adminContent.style.display = 'none';
            }
        }
        
        // 存酒功能
        function storeWine() {
            const customerPhone = document.getElementById('customer-phone').value;
            const customerName = document.getElementById('customer-name').value;
            const wineType = document.getElementById('wine-type').value;
            const wineQuantity = parseInt(document.getElementById('wine-quantity').value);
            const storageDate = document.getElementById('storage-date').value;
            const expiryDate = document.getElementById('expiry-date').value;
            const notes = document.getElementById('notes').value;
            
            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(customerPhone)) {
                alert('请输入有效的11位手机号码');
                return;
            }
            
            // 验证到期时间不能早于存酒时间
            if (new Date(expiryDate) <= new Date(storageDate)) {
                alert('到期时间必须晚于存酒日期');
                return;
            }
            
            const wine = {
                id: nextId++,
                customerPhone: customerPhone,
                customerName: customerName,
                type: wineType,
                quantity: wineQuantity,
                storageDate: storageDate,
                expiryDate: expiryDate,
                takeDate: null,
                status: 'stored', // stored, taken
                notes: notes
            };
            
            wines.push(wine);
            saveData();
            
            // 重置表单
            storeForm.reset();
            const today = new Date();
            document.getElementById('storage-date').valueAsDate = today;
            
            // 设置默认到期时间为30天后
            const defaultExpiry = new Date();
            defaultExpiry.setDate(today.getDate() + 30);
            document.getElementById('expiry-date').valueAsDate = defaultExpiry;
            
            document.getElementById('wine-quantity').value = 1;
            
            // 显示成功消息
            alert(`成功为 ${customerName} (${customerPhone}) 存入 ${wineQuantity} 瓶 ${wineType}`);
            
            // 更新统计
            updateStats();
        }
        
        // 取酒功能
        function takeWine(wineId) {
            const wine = wines.find(w => w.id === wineId);
            if (!wine) return;
            
            const takeQuantity = parseInt(prompt(`请输入取出的数量 (当前库存: ${wine.quantity}):`, wine.quantity));
            
            if (isNaN(takeQuantity) || takeQuantity <= 0) {
                alert('请输入有效的数量');
                return;
            }
            
            if (takeQuantity > wine.quantity) {
                alert('取酒数量不能超过库存数量');
                return;
            }
            
            // 更新酒品信息
            if (takeQuantity === wine.quantity) {
                // 全部取出
                wine.status = 'taken';
                wine.takeDate = new Date().toISOString().split('T')[0];
                wine.quantity = 0;
            } else {
                // 部分取出
                wine.quantity -= takeQuantity;
                
                // 创建一条取出记录
                const takeRecord = {
                    id: nextId++,
                    customerPhone: wine.customerPhone,
                    customerName: wine.customerName,
                    type: wine.type,
                    quantity: takeQuantity,
                    storageDate: wine.storageDate,
                    expiryDate: wine.expiryDate,
                    takeDate: new Date().toISOString().split('T')[0],
                    status: 'taken',
                    notes: `部分取出自库存 #${wine.id}`,
                    originalId: wine.id
                };
                
                wines.push(takeRecord);
            }
            
            saveData();
            updateStats();
            
            // 重新渲染当前客户的存酒列表
            renderStoredWines(wine.customerPhone);
            renderCustomerDetails(wine.customerPhone);
            
            alert(`成功为 ${wine.customerName} 取出 ${takeQuantity} 瓶 ${wine.type}`);
        }
        
        // 删除记录功能（管理后台使用）
        function deleteWine(wineId) {
            if (!confirm('确定要删除这条记录吗？此操作不可恢复。')) {
                return;
            }
            
            wines = wines.filter(w => w.id !== wineId);
            saveData();
            updateStats();
            renderAdminRecords();
            alert('记录已删除');
        }
        
        // 渲染客户信息
        function renderCustomerDetails(phone) {
            const customerWines = wines.filter(wine => wine.customerPhone === phone);
            if (customerWines.length === 0) {
                customerDetails.style.display = 'none';
                return;
            }
            
            const customerName = customerWines[0].customerName;
            const storedCount = customerWines.filter(w => w.status === 'stored').reduce((sum, w) => sum + w.quantity, 0);
            const totalCount = customerWines.reduce((sum, w) => sum + w.quantity, 0);
            const takenCount = customerWines.filter(w => w.status === 'taken').reduce((sum, w) => sum + w.quantity, 0);
            
            customerDetails.style.display = 'block';
            customerDetails.innerHTML = `
                <div class="customer-info">
                    <div class="customer-avatar">${customerName.charAt(0)}</div>
                    <div class="customer-details">
                        <div class="customer-name">${customerName}</div>
                        <div class="customer-phone">${phone}</div>
                    </div>
                    <div class="customer-stats">
                        <div class="customer-stat">
                            <div class="customer-stat-value">${storedCount}</div>
                            <div class="customer-stat-label">在库</div>
                        </div>
                        <div class="customer-stat">
                            <div class="customer-stat-value">${takenCount}</div>
                            <div class="customer-stat-label">已取</div>
                        </div>
                        <div class="customer-stat">
                            <div class="customer-stat-value">${totalCount}</div>
                            <div class="customer-stat-label">总计</div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // 渲染存酒列表
        function renderStoredWines(phone) {
            const filteredWines = wines.filter(wine => 
                wine.status === 'stored' && 
                wine.customerPhone === phone
            );
            
            if (filteredWines.length === 0) {
                storedWinesList.innerHTML = `
                    <div class="empty-state">
                        <div>🍷</div>
                        <div>该手机号暂无存酒记录</div>
                    </div>
                `;
                return;
            }
            
            storedWinesList.innerHTML = filteredWines.map(wine => {
                // 检查是否即将到期（7天内）
                const today = new Date();
                const expiryDate = new Date(wine.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                
                let expiryClass = '';
                let expiryText = '';
                
                if (daysUntilExpiry <= 0) {
                    expiryClass = 'expiry-danger';
                    expiryText = '已到期';
                } else if (daysUntilExpiry <= 7) {
                    expiryClass = 'expiry-warning';
                    expiryText = `${daysUntilExpiry}天后到期`;
                } else {
                    expiryText = `${daysUntilExpiry}天后到期`;
                }
                
                return `
                <div class="wine-item">
                    <div class="wine-info">
                        <div class="wine-type">${wine.type} <span class="status-badge status-stored">在库</span></div>
                        <div class="wine-details">
                            数量: ${wine.quantity} | 存酒日期: ${formatDate(wine.storageDate)}
                        </div>
                        <div class="wine-details ${expiryClass}">
                            到期时间: ${formatDate(wine.expiryDate)} (${expiryText}) ${wine.notes ? `| 备注: ${wine.notes}` : ''}
                        </div>
                    </div>
                    <div class="wine-actions">
                        <button class="action-btn btn-warning" onclick="takeWine(${wine.id})">取酒</button>
                    </div>
                </div>
                `;
            }).join('');
        }
        
        // 渲染历史记录
        function renderHistory(phone) {
            // 按日期排序，最新的在前面
            const customerWines = wines.filter(wine => wine.customerPhone === phone);
            const sortedWines = [...customerWines].sort((a, b) => {
                const dateA = a.takeDate || a.storageDate;
                const dateB = b.takeDate || b.storageDate;
                return new Date(dateB) - new Date(dateA);
            });
            
            if (sortedWines.length === 0) {
                historyList.innerHTML = `
                    <div class="empty-state">
                        <div>📝</div>
                        <div>该手机号暂无存取记录</div>
                    </div>
                `;
                return;
            }
            
            historyList.innerHTML = sortedWines.map(wine => {
                // 检查是否即将到期（7天内）
                const today = new Date();
                const expiryDate = new Date(wine.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                
                let expiryClass = '';
                let expiryText = '';
                
                if (daysUntilExpiry <= 0) {
                    expiryClass = 'expiry-danger';
                    expiryText = '已到期';
                } else if (daysUntilExpiry <= 7) {
                    expiryClass = 'expiry-warning';
                    expiryText = `${daysUntilExpiry}天后到期`;
                } else {
                    expiryText = `${daysUntilExpiry}天后到期`;
                }
                
                return `
                <div class="wine-item">
                    <div class="wine-info">
                        <div class="wine-type">${wine.type} 
                            <span class="status-badge ${wine.status === 'stored' ? 'status-stored' : 'status-taken'}">
                                ${wine.status === 'stored' ? '在库' : '已取'}
                            </span>
                        </div>
                        <div class="wine-details">
                            数量: ${wine.quantity} | ${wine.status === 'stored' ? 
                                `存酒日期: ${formatDate(wine.storageDate)}` : 
                                `取酒日期: ${formatDate(wine.takeDate)}`
                            }
                        </div>
                        <div class="wine-details ${expiryClass}">
                            到期时间: ${formatDate(wine.expiryDate)} (${expiryText}) ${wine.notes ? `| 备注: ${wine.notes}` : ''}
                        </div>
                    </div>
                </div>
                `;
            }).join('');
        }
        
        // 更新统计信息
        function updateStats() {
            const total = wines.length;
            const stored = wines.filter(w => w.status === 'stored').length;
            
            // 计算即将到期的酒品（7天内）
            const today = new Date();
            const expired = wines.filter(w => {
                if (w.status !== 'stored') return false;
                const expiryDate = new Date(w.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                return daysUntilExpiry <= 7;
            }).length;
            
            totalWinesEl.textContent = total;
            storedWinesEl.textContent = stored;
            expiredWinesEl.textContent = expired;
        }
        
        // 更新管理后台统计
        function updateAdminStats() {
            const total = wines.length;
            const stored = wines.filter(w => w.status === 'stored').length;
            const taken = wines.filter(w => w.status === 'taken').length;
            
            // 计算即将到期的酒品（7天内）
            const today = new Date();
            const expired = wines.filter(w => {
                if (w.status !== 'stored') return false;
                const expiryDate = new Date(w.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                return daysUntilExpiry <= 7;
            }).length;
            
            adminTotalWinesEl.textContent = total;
            adminStoredWinesEl.textContent = stored;
            adminTakenWinesEl.textContent = taken;
            adminExpiredWinesEl.textContent = expired;
        }
        
        // 渲染客户统计
        function renderCustomerStats() {
            // 按客户分组统计
            const customerStats = {};
            
            wines.forEach(wine => {
                const key = wine.customerPhone;
                if (!customerStats[key]) {
                    customerStats[key] = {
                        name: wine.customerName,
                        phone: wine.customerPhone,
                        total: 0,
                        stored: 0,
                        taken: 0
                    };
                }
                
                customerStats[key].total += wine.quantity;
                if (wine.status === 'stored') {
                    customerStats[key].stored += wine.quantity;
                } else {
                    customerStats[key].taken += wine.quantity;
                }
            });
            
            // 转换为数组并排序
            let customers = Object.values(customerStats);
            const sortBy = customerSort.value;
            
            if (sortBy === 'name') {
                customers.sort((a, b) => a.name.localeCompare(b.name));
            } else if (sortBy === 'count') {
                customers.sort((a, b) => b.total - a.total);
            }
            
            if (customers.length === 0) {
                customerStatsList.innerHTML = `
                    <div class="empty-state">
                        <div>👥</div>
                        <div>暂无客户数据</div>
                    </div>
                `;
                return;
            }
            
            customerStatsList.innerHTML = `
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>客户姓名</th>
                            <th>手机号码</th>
                            <th>总存酒数</th>
                            <th>在库数量</th>
                            <th>已取数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${customers.map(customer => `
                            <tr>
                                <td>${customer.name}</td>
                                <td>${customer.phone}</td>
                                <td>${customer.total}</td>
                                <td>${customer.stored}</td>
                                <td>${customer.taken}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
        }
        
        // 渲染管理后台记录
        function renderAdminRecords() {
            let filteredWines = [...wines];
            
            // 状态筛选
            const status = statusFilter.value;
            if (status !== 'all') {
                filteredWines = filteredWines.filter(wine => wine.status === status);
            }
            
            // 搜索筛选
            const searchTerm = adminSearch.value.toLowerCase();
            if (searchTerm) {
                filteredWines = filteredWines.filter(wine => 
                    wine.customerName.toLowerCase().includes(searchTerm) || 
                    wine.customerPhone.includes(searchTerm)
                );
            }
            
            // 按日期排序，最新的在前面
            filteredWines.sort((a, b) => {
                const dateA = a.takeDate || a.storageDate;
                const dateB = b.takeDate || b.storageDate;
                return new Date(dateB) - new Date(dateA);
            });
            
            if (filteredWines.length === 0) {
                adminRecordsList.innerHTML = `
                    <div class="empty-state">
                        <div>📋</div>
                        <div>暂无记录</div>
                    </div>
                `;
                return;
            }
            
            adminRecordsList.innerHTML = `
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>客户姓名</th>
                            <th>手机号码</th>
                            <th>酒品类型</th>
                            <th>数量</th>
                            <th>状态</th>
                            <th>存酒日期</th>
                            <th>取酒日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${filteredWines.map(wine => `
                            <tr>
                                <td>${wine.customerName}</td>
                                <td>${wine.customerPhone}</td>
                                <td>${wine.type}</td>
                                <td>${wine.quantity}</td>
                                <td>
                                    <span class="status-badge ${wine.status === 'stored' ? 'status-stored' : 'status-taken'}">
                                        ${wine.status === 'stored' ? '在库' : '已取'}
                                    </span>
                                </td>
                                <td>${formatDate(wine.storageDate)}</td>
                                <td>${wine.takeDate ? formatDate(wine.takeDate) : '-'}</td>
                                <td>
                                    <div class="admin-actions">
                                        <button class="admin-btn btn-danger" onclick="deleteWine(${wine.id})">删除</button>
                                    </div>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            `;
        }
        
        // 渲染到期提醒列表
        function renderExpiryList() {
            const today = new Date();
            let filteredWines = wines.filter(wine => {
                if (wine.status !== 'stored') return false;
                
                const expiryDate = new Date(wine.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                
                const filter = expiryFilter.value;
                if (filter === 'week') {
                    return daysUntilExpiry <= 7 && daysUntilExpiry >= 0;
                } else if (filter === 'expired') {
                    return daysUntilExpiry < 0;
                }
                
                return daysUntilExpiry <= 7;
            });
            
            // 按到期时间排序
            filteredWines.sort((a, b) => new Date(a.expiryDate) - new Date(b.expiryDate));
            
            if (filteredWines.length === 0) {
                expiryList.innerHTML = `
                    <div class="empty-state">
                        <div>⏰</div>
                        <div>暂无到期提醒</div>
                    </div>
                `;
                return;
            }
            
            expiryList.innerHTML = filteredWines.map(wine => {
                const expiryDate = new Date(wine.expiryDate);
                const daysUntilExpiry = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                
                let expiryClass = '';
                let expiryText = '';
                
                if (daysUntilExpiry <= 0) {
                    expiryClass = 'expiry-danger';
                    expiryText = '已到期';
                } else if (daysUntilExpiry <= 7) {
                    expiryClass = 'expiry-warning';
                    expiryText = `${daysUntilExpiry}天后到期`;
                }
                
                return `
                <div class="wine-item">
                    <div class="wine-info">
                        <div class="wine-type">${wine.type} <span class="status-badge ${expiryClass === 'expiry-danger' ? 'status-expired' : 'status-stored'}">${expiryText}</span></div>
                        <div class="wine-details">
                            客户: ${wine.customerName} (${wine.customerPhone}) | 数量: ${wine.quantity}
                        </div>
                        <div class="wine-details">
                            存酒日期: ${formatDate(wine.storageDate)} | 到期时间: ${formatDate(wine.expiryDate)}
                        </div>
                    </div>
                    <div class="wine-actions">
                        <button class="action-btn btn-warning" onclick="takeWine(${wine.id})">取酒</button>
                    </div>
                </div>
                `;
            }).join('');
        }
        
        // 保存数据到localStorage
        function saveData() {
            localStorage.setItem('wines', JSON.stringify(wines));
            localStorage.setItem('nextId', nextId.toString());
        }
        
        // 格式化日期显示
        function formatDate(dateString) {
            if (!dateString) return '未知日期';
            const date = new Date(dateString);
            return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        }
        
           </script>
</body>
</html>